<template>
    <div class="imgItem">

        <div class="top">
            <slot></slot>
        </div>

        <div class="bottomBtn">
           <p> <a href="javascript:;" @click="addImgDown">加载更多</a></p>
        </div>
    </div>
</template>

<script>
export default {
    name:'imgItem',
    methods:{
        addImgDown(){
            this.$emit('addImg','加载更多')
        }
    }
}
</script>

<style scoped>
.imgItem{
    width: 1000px;
    margin: 20px auto;
}
.imgItem .top{
    width: 100%;
    display: flex;
    flex-flow: wrap;
    flex-direction: row;
    justify-content: space-around;
}
.imgItem .top .item{
     width:24%;
     align-items:flex-start;
     border: 1px solid rgba(0,0,0,.08);;
     background: #ffffff;
     margin-bottom: 20px;
     border-radius: 5px;
     box-shadow: 3px 3px 2px rgba(0,0,0,.08);
}
.item-after{
    width:24%;
}
.imgItem .top .item .img{
    width: 100%;
    height: 230px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.8);
}
.imgItem .top .item .img img{
    max-width: 100%;
    max-height: 100%;
}
.imgItem  .top .item .text p:nth-child(1){
    margin: 0;
    height: 64px;
    padding: 10px;
    font-size: 12px;
    color: #444;
}
.imgItem .top .item .text p:nth-child(2){
    font-size: 16px;
    margin: 0;
    text-align: center;
    color: rgb(116, 92, 92);
}
.imgItem .bottomBtn{
    padding: 30px 0;
    width: 100%;
}
.imgItem .bottomBtn p{
    text-align: center;
}
.imgItem .bottomBtn a{
    padding: 10px 10px;
    color: #fff;
    background: #4CAF50;
    border-radius: 3px;
}
</style>